<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地存储</title>
</head>
<body>
<!--
    本地存储介绍
        1.数据存储在用户浏览器中
        2.设置、读取方便，甚至页面刷新不丢失数据
        3.容量较大，sessionStorage和localStorage约5M左右
        常见使用场景：页面刷新数据不丢失

    本地存储分类————localStorage
        作用: 可以将数据永久存储到本地（用户的电脑中）除非用户手动删除，否则关闭页面也会存在
        特性:
            可以实现多窗口(页面)共享(同一浏览器可以共享)
            以键值对的形式存储使用
            本地存储只能存储字符串类型，别的类型进去会转换成字符串
        语法:
            存储数据: localStorage.setItem('key' , 'value')
            获取数据: localStorage.getItem('key')
            删除数据: localStorage.removeItem('key')
            修改数据: localStorage.setItem('key' , 'valueNew')
        找法:
            浏览器——应用程序——localStorage

    本地存储分类————sessionStorage
        特性:
            生命周期为关闭浏览器窗口
            在同一个窗口(页面)下数据可以共享
            以键值对的形式存储使用
            用法跟localStorage基本相同
-->
<!--
    本地存储存复杂数据类型
    解决: 需要将复杂数据类型转换成JSON字符串，存储到本地
    语法: JSON.stringify(复杂数据类型)——————JSON转成字符串
         JSON.parse(字符串)————字符串转成JSON

-->
</body>
<script>
    // 存储数据
    localStorage.setItem('uname' , 'Black')
    // 获取数据
    console.log(localStorage.getItem('uname'))
    // 修改数据
    localStorage.setItem('uname' , 'pink')
    // 删除数据
    localStorage.removeItem('uname')

    const obj = {
        uname: 'Black',
        age: 18,
        gender: '男'
    }
    // 复杂数据类型存储必须转换成JSON字符串存储
    localStorage.setItem('obj' , JSON.stringify(obj))
    // 当然在取出时要将字符串重新转成对象
    console.log(JSON.parse(localStorage.getItem('obj')))
</script>
</html>